<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>meaasge</title>
	<link rel="stylesheet" href="../css/reset.css">
	<link rel="stylesheet" href="../css/rem.css">
	<link rel="stylesheet" href="../css/message.css?name=123" />
	<style>
		[v-cloak] {
			display: none;
		}
	</style>
</head>

<body>
	<!-- 外框 -->
	<div id="waikuang" v-cloak>
		<!-- <div class="top">
				<a href="javascript:;" onclick="history.back();"><img src="../img/fanhui.PNG"></a>
				<p>MESSAGE</p>
			</div> -->
		<!-- 信息页头部 -->
		<div id="top" class="message_top">
			<div class="fanhui">
				<a href="javascript:;" onclick="history.back();"><img src="../img/fanhui.PNG"></a>
			</div>

			<div class="text_top">
				<p>{{title}}</p>
			</div>
		</div>
		<!-- 信息页内容 -->
		<div class="message_tv">
			<ul>
				<li v-for="item in lists">
					<a href="#">
						<div class="message-left">
							<div class="message-top">
								<div class="xiaomiao_pic">
									<img :src="item.avatar" alt="">
								</div>
								<p>{{item.name}}</p>
							</div>
							<div class="message-bottom">{{item.content}}</div>
						</div>
						<div class="message-right">{{item.time}}</div>
					</a>
				</li>
				</ui>
		</div>
		<!-- 底部导航栏 -->
		<div class="foot_menu">
			<!-- <div class="bei"></div> -->
			<ul>
				<li>
					<a href="home.html">
						<img src="../img/ziyuanzhuye.png">
					</a>
				</li>
				<li class="faxian">
					<a href="circle.html">
						<img src="../img/rongheCDN.png">
					</a>
				</li>
				<li>
					<a href="message.html">
						<img src="../img/xinxi.jpg">
					</a>
				</li>
				<li>
					<a href="personal.html">
						<img src="../img/yaoqinghaoyou.png">
					</a>
				</li>
			</ul>
		</div>
	</div>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
	<script>
		new Vue({
			el: '#waikuang',
			data: {
				title: 'MESSAGE',
				lists: [
					{
						avatar: '../img/aichong07.png',
						name: '物业小喵',
						content: '您有一条新消息',
						time: '刚刚'
					}, {
						avatar: '../img/icon-test-2.png',
						name: '会飞的柯基',
						content: '您有一条新消息',
						time: '昨天'
					}, {
						avatar: '../img/icon-test.png',
						name: '一碗炒粉',
						content: '您有一条新消息',
						time: '昨天'
					}, {
						avatar: '../img/icon-test-copy.png',
						name: '一块酥肉',
						content: '您有一条新消息',
						time: '一个星期以前'
					}, {
						avatar: '../img/BARISTA.png',
						name: '聪明的哈士奇',
						content: '您有一条新消息',
						time: '一个星期以前'
					}, {
						avatar: '../img/BARISTA.png',
						name: '聪明的哈士奇',
						content: '您有一条新消息',
						time: '一个星期以前'
					}
				]
			}
		})
	</script>
</body>

</html>